<!--
 * @Descripttion:
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-18 13:45:27
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-25 13:46:50
-->
<template>
  <div class="register">
    <div class="header">
      <div class="logo-con set-flex">
        <!-- <a class="logo" ></a> -->
        <router-link class="logo" :to="{path: '/agshop'}"></router-link>
        <div class="logo-title">欢迎注册</div>
      </div>
    </div>
    <div class="register-body">
		<div class="typeView">
			<div class="item" :class="tabIndex == 1?'active':''" @click="changeNav(1)">采购用户/组织</div>
			<div class="item" :class="tabIndex == 2?'active':''" @click="changeNav(2)">供货组织</div>
		</div>
      <el-form
        :label-position="'right'"
        :rules="rules"
        label-width="120px"
        :model="form"
        label-suffix=":"
        ref="form"
      >
        <el-row>
			
			<!-- <el-form-item
			  class='form-box-label'
			  label='组织机构选择'
			  prop='orgId'>
			  <el-cascader
			    :options='purchaserOrgAll'
			    :props="{ value: 'id', label: 'name', checkStrictly: 'true' }"
			    v-model='form.orgId'
			    :show-all-levels='false'>
			  </el-cascader>
			</el-form-item> -->
			
          <el-col :span="12">
            <el-form-item label="用户名" prop="account">
              <el-input v-model.trim="form.account" placeholder="请输入"></el-input>
			  <p style="color: red;" v-if="tabIndex == 1">*鞍钢集团员工请填写8位钢通卡卡号</p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model.trim="form.password" placeholder="请输入" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话号码" prop="tel">
              <el-input v-model.trim="form.tel" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="传真号码" prop="fax">
              <el-input v-model.trim="form.fax" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="mobile">
              <el-input v-model.trim="form.mobile" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model.trim="form.email" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item el-form-item label="编码">
              <el-input v-model.trim="form.UKEY" placeholder="请输入"></el-input>
			  <p style="color: red;" v-if="tabIndex == 1">*请再次填写8位钢通卡号，无钢通卡无需填写</p>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item el-form-item label="是否有效">-->
<!--              &lt;!&ndash; 1 有效 0 无效 &ndash;&gt;-->
<!--              <el-radio v-model="form.status" label="1">是</el-radio>-->
<!--              <el-radio v-model="form.status" label="0">否</el-radio>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
      </el-form>
      <div class="action">
        <el-button type="primary" class="submit" @click="registerEvent">完成注册</el-button>
      </div>
      <div class="login">
       <router-link :to="{path:'/login'}">
          已有账号，请登录 <i class="el-icon-arrow-right"></i>
       </router-link>
      </div>

      <reg-footer></reg-footer>
    </div>
  </div>
</template>

<script>
import regFooter from "./components/com-footer";
import { register } from "@/api/common.api";
import { validateEmail, validatePhonenumber } from "@/validations/validate"
import { logout,
  getPurchaserOrgAll, } from '@/api/admin.api'
export default {
  data() {
    // 传真号验证
    const validatFax = (rule, value, callback) => {
      if (!value) {
        return callback()
      }
      if (value) {
        const reg =  /^(\d{3,4}-)?\d{7,8}$/
        if (!reg.test(value)) {
          return callback(new Error("传真号码 '区号-传真号码'"))
        } else {
          return callback()
        }
      }
    }
      // 验证座机
    const validateTel = (rule, value, callback) => {
      if (!value) {
        return callback()
      }
      if (value) {
        const reg = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/ //座机
        if (!reg.test(value)) {
          return callback(new Error("座机格式'区号-座机号码'"))
        } else {
          return callback()
        }
      }
    }
    return {
      form: {
        name: '',
        account: '',
        password: '',
        UKEY: '',
        email: '',
        tel:'',
        fax:'',
        mobile:''
      },
	  tabIndex:1,
	  purchaserOrgAll:[],
      rules: {
        account: [
          { required: true, message: "请您输入用户名", trigger: "blur" },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: "请您输入密码", trigger: "blur" },
          { pattern: /(^(?=.*?\d)(?=.*?[A-Za-z])[\dA-Za-z]{8,}$)/, message: '密码必须（字母+数字）最少8位', trigger: 'blur' }
        ],
        name: [
          { required: true, message: "请您输入姓名", trigger: "blur" },
          { min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: "请您输入电子邮箱", trigger: "blur" },
          {validator: validateEmail,  message: "请您输入正确的电子邮箱",trigger: "blur"  }
        ],
        mobile: [
          { required: true, message: "请您输入手机号码", trigger: "blur" },
          {validator: validatePhonenumber, message: "请您输入正确的手机号码", trigger: "blur"  }
        ],
        tel:[
          { validator: validateTel, trigger: 'blur' }
        ],
        fax:[
          { validator: validatFax, trigger: 'blur' }
        ]
      },
    };
  },
  components: {
    regFooter,
  },
  created(){
    this.logout()
	// this.getPurchaserOrgAllFn()
  },
  methods: {
	  changeNav(t){
		  this.tabIndex = t;
	  },
    getPurchaserOrgAllFn() {
      getPurchaserOrgAll()
        .then((response) => {
          this.purchaserOrgAll = response
        })
    },
    // 注册事件
    registerEvent(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          register(this.form).then(res=>{
            // console.log(res,'res');
            this.$confirm('注册成功', '提示', {
              confirmButtonText: '去登录',
              showCancelButton: false,
              type: 'success',
              center: true
            }).then(() => {
              this.$router.push('/login')
            })
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 退出当前登录
    logout(){
      const userId =  this.$tools.localRead("userId")
      if (userId) {
        this.$store.state.app.tags = []
        const user_token = this.$tools.localRead('user_token')
        logout(user_token)
        localStorage.clear()
      }
    }
  },
};
</script>

<style scoped lang='scss'>
.register {
  min-height: 100%;
  background: #fff;
  .header {
    margin-bottom: 50px;
    height: 110px;
    background: url(~@/assets/mall-images/headbg.jpg) repeat-x left bottom;
    .logo-con {
      width: 1200px;
      margin: 0 auto;
      .logo {
        width: 260px;
        /* height: 50px; */
        margin-top: 30px;
        background: url(~@/assets/shoping-logo.png) no-repeat;
		background-size: 100% 100%;
      }
      .logo-title {
        height: 34px;
        line-height: 34px;
        font-size: 24px;
        color: #333;
        margin: 34px 0 0 18px;
      }
    }
  }
  &-body {
    width: 1200px;
    margin: 0 auto;
  }
  .action {
    text-align: center;
    .submit {
      padding: 16px 80px;
    }
  }
  .login{
    margin: 20px auto 140px;
    text-align: center;
    a{
      color: #999;
    }
  }
}
.typeView{
	width: 260px;
	margin: 20px auto;
	margin-top: 0px;
	overflow: hidden;
	.item{
		width: 130px;
		padding: 10px 0px;
		float: left;
		text-align: center;
		cursor: pointer;
	}
	.active{
		border-bottom: 2px solid #FF0000;
	}
}
</style>
